<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>习惯养成 App 原型</title>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
        }

        body {
            background: #f5f5f5;
            padding: 20px;
        }

        .prototype-container {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 20px;
            max-width: 1200px;
            margin: 0 auto;
        }

        .screen {
            background: white;
            border-radius: 40px;
            padding: 20px;
            height: 600px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            position: relative;
            overflow: hidden;
        }

        .screen-title {
            text-align: center;
            font-size: 14px;
            color: #333;
            margin-bottom: 20px;
            font-weight: bold;
        }

        /* 状态栏样式 */
        .status-bar {
            height: 44px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 20px;
            font-size: 14px;
            background: white;
        }

        /* 底部导航栏 */
        .tab-bar {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 84px;
            background: white;
            display: flex;
            justify-content: space-around;
            align-items: center;
            border-top: 1px solid #eee;
            padding-bottom: 20px;
        }

        .tab-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            color: #999;
        }

        .tab-item.active {
            color: #007AFF;
        }

        .tab-item i {
            font-size: 24px;
            margin-bottom: 4px;
        }

        .tab-item span {
            font-size: 12px;
        }

        /* 主要内容区域 */
        .content {
            height: calc(100% - 128px);
            overflow-y: auto;
            padding: 20px;
        }

        /* 习惯卡片样式 */
        .habit-card {
            background: #f8f8f8;
            border-radius: 16px;
            padding: 20px;
            margin-bottom: 16px;
        }

        .habit-card h3 {
            font-size: 18px;
            margin-bottom: 8px;
        }

        .habit-card p {
            font-size: 14px;
            color: #666;
        }

        /* 按钮样式 */
        .btn {
            background: #007AFF;
            color: white;
            border: none;
            padding: 12px 24px;
            border-radius: 24px;
            font-size: 16px;
            margin: 8px 0;
            width: 100%;
            text-align: center;
        }

        /* 统计图表占位 */
        .chart-placeholder {
            background: #f0f0f0;
            height: 200px;
            border-radius: 16px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 16px 0;
        }

        /* 表单样式 */
        .form-group {
            margin-bottom: 16px;
        }

        .form-group label {
            display: block;
            margin-bottom: 8px;
            font-size: 14px;
            color: #333;
        }

        .form-group input {
            width: 100%;
            padding: 12px;
            border: 1px solid #ddd;
            border-radius: 8px;
            font-size: 16px;
        }

        /* 成就徽章样式 */
        .badge-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 16px;
            margin-top: 16px;
        }

        .badge {
            background: #f0f0f0;
            border-radius: 50%;
            width: 80px;
            height: 80px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
            color: #666;
        }

    </style>
</head>
<body>
    <div class="prototype-container">
        <!-- 启动页 -->
        <div class="screen">
            <div class="screen-title">启动页</div>
            <div class="content" style="display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center;">
                <i class="fas fa-seedling" style="font-size: 64px; color: #007AFF; margin-bottom: 24px;"></i>
                <h1 style="margin-bottom: 16px;">掌控习惯</h1>
                <p style="color: #666; margin-bottom: 32px;">培养好习惯，改变你的人生</p>
                <button class="btn">开始使用</button>
            </div>
        </div>

        <!-- 主页/仪表板 -->
        <div class="screen">
            <div class="screen-title">主页</div>
            <div class="status-bar">
                <span>9:41</span>
                <div>
                    <i class="fas fa-signal"></i>
                    <i class="fas fa-wifi" style="margin-left: 8px;"></i>
                    <i class="fas fa-battery-full" style="margin-left: 8px;"></i>
                </div>
            </div>
            <div class="content">
                <h2 style="margin-bottom: 20px;">今日习惯</h2>
                <div class="habit-card">
                    <h3>晨跑 5 公里</h3>
                    <p>已坚持 7 天</p>
                    <button class="btn" style="margin-top: 16px;">打卡</button>
                </div>
                <div class="habit-card">
                    <h3>冥想 15 分钟</h3>
                    <p>已坚持 12 天</p>
                    <button class="btn" style="margin-top: 16px;">打卡</button>
                </div>
                <div class="chart-placeholder">
                    周统计图表
                </div>
            </div>
            <div class="tab-bar">
                <div class="tab-item active">
                    <i class="fas fa-home"></i>
                    <span>主页</span>
                </div>
                <div class="tab-item">
                    <i class="fas fa-list"></i>
                    <span>习惯</span>
                </div>
                <div class="tab-item">
                    <i class="fas fa-chart-bar"></i>
                    <span>统计</span>
                </div>
                <div class="tab-item">
                    <i class="fas fa-user"></i>
                    <span>我的</span>
                </div>
            </div>
        </div>

        <!-- 习惯列表页 -->
        <div class="screen">
            <div class="screen-title">习惯列表</div>
            <div class="status-bar">
                <span>9:41</span>
                <div>
                    <i class="fas fa-signal"></i>
                    <i class="fas fa-wifi" style="margin-left: 8px;"></i>
                    <i class="fas fa-battery-full" style="margin-left: 8px;"></i>
                </div>
            </div>
            <div class="content">
                <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;">
                    <h2>我的习惯</h2>
                    <i class="fas fa-plus" style="font-size: 24px; color: #007AFF;"></i>
                </div>
                <div class="habit-card">
                    <h3>晨跑 5 公里</h3>
                    <p>每天 06:00</p>
                    <div style="display: flex; gap: 8px; margin-top: 12px;">
                        <span style="background: #E3F2FD; color: #1976D2; padding: 4px 8px; border-radius: 4px; font-size: 12px;">运动</span>
                        <span style="background: #E8F5E9; color: #388E3C; padding: 4px 8px; border-radius: 4px; font-size: 12px;">健康</span>
                    </div>
                </div>
                <div class="habit-card">
                    <h3>冥想 15 分钟</h3>
                    <p>每天 07:00</p>
                    <div style="display: flex; gap: 8px; margin-top: 12px;">
                        <span style="background: #FFF3E0; color: #E64A19; padding: 4px 8px; border-radius: 4px; font-size: 12px;">心理</span>
                    </div>
                </div>
            </div>
            <div class="tab-bar">
                <div class="tab-item">
                    <i class="fas fa-home"></i>
                    <span>主页</span>
                </div>
                <div class="tab-item active">
                    <i class="fas fa-list"></i>
                    <span>习惯</span>
                </div>
                <div class="tab-item">
                    <i class="fas fa-chart-bar"></i>
                    <span>统计</span>
                </div>
                <div class="tab-item">
                    <i class="fas fa-user"></i>
                    <span>我的</span>
                </div>
            </div>
        </div>

        <!-- 习惯详情页 -->
        <div class="screen">
            <div class="screen-title">习惯详情</div>
            <div class="status-bar">
                <span>9:41</span>
                <div>
                    <i class="fas fa-signal"></i>
                    <i class="fas fa-wifi" style="margin-left: 8px;"></i>
                    <i class="fas fa-battery-full" style="margin-left: 8px;"></i>
                </div>
            </div>
            <div class="content">
                <div style="display: flex; align-items: center; margin-bottom: 24px;">
                    <i class="fas fa-arrow-left" style="margin-right: 16px;"></i>
                    <h2>晨跑 5 公里</h2>
                </div>
                <div class="chart-placeholder">
                    月度完成情况
                </div>
                <div style="margin-top: 24px;">
                    <h3 style="margin-bottom: 16px;">基本信息</h3>
                    <p style="margin-bottom: 8px;"><i class="fas fa-clock" style="margin-right: 8px;"></i> 每天 06:00</p>
                    <p style="margin-bottom: 8px;"><i class="fas fa-calendar" style="margin-right: 8px;"></i> 已坚持 7 天</p>
                    <p><i class="fas fa-bullseye" style="margin-right: 8px;"></i> 目标：30 天</p>
                </div>
                <button class="btn" style="margin-top: 24px;">编辑习惯</button>
            </div>
        </div>

        <!-- 新建/编辑习惯页 -->
        <div class="screen">
            <div class="screen-title">新建习惯</div>
            <div class="status-bar">
                <span>9:41</span>
                <div>
                    <i class="fas fa-signal"></i>
                    <i class="fas fa-wifi" style="margin-left: 8px;"></i>
                    <i class="fas fa-battery-full" style="margin-left: 8px;"></i>
                </div>
            </div>
            <div class="content">
                <div style="display: flex; align-items: center; margin-bottom: 24px;">
                    <i class="fas fa-times" style="margin-right: 16px;"></i>
                    <h2>新建习惯</h2>
                </div>
                <div class="form-group">
                    <label>习惯名称</label>
                    <input type="text" placeholder="输入习惯名称">
                </div>
                <div class="form-group">
                    <label>类别</label>
                    <div style="display: flex; gap: 8px; flex-wrap: wrap;">
                        <span style="background: #E3F2FD; color: #1976D2; padding: 8px 16px; border-radius: 20px; font-size: 14px;">运动</span>
                        <span style="background: #E8F5E9; color: #388E3C; padding: 8px 16px; border-radius: 20px; font-size: 14px;">健康</span>
                        <span style="background: #FFF3E0; color: #E64A19; padding: 8px 16px; border-radius: 20px; font-size: 14px;">心理</span>
                        <span style="background: #F3E5F5; color: #7B1FA2; padding: 8px 16px; border-radius: 20px; font-size: 14px;">学习</span>
                    </div>
                </div>
                <div class="form-group">
                    <label>提醒时间</label>
                    <input type="time" value="06:00">
                </div>
                <div class="form-group">
                    <label>目标天数</label>
                    <input type="number" value="30">
                </div>
                <button class="btn">保存</button>
            </div>
        </div>

        <!-- 数据统计页 -->
        <div class="screen">
            <div class="screen-title">数据统计</div>
            <div class="status-bar">
                <span>9:41</span>
                <div>
                    <i class="fas fa-signal"></i>
                    <i class="fas fa-wifi" style="margin-left: 8px;"></i>
                    <i class="fas fa-battery-full" style="margin-left: 8px;"></i>
                </div>
            </div>
            <div class="content">
                <h2 style="margin-bottom: 20px;">统计概览</h2>
                <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 24px;">
                    <div style="background: #E3F2FD; padding: 16px; border-radius: 16px;">
                        <h3 style="color: #1976D2;">总习惯</h3>
                        <p style="font-size: 24px; font-weight: bold; color: #1976D2;">5</p>
                    </div>
                    <div style="background: #E8F5E9; padding: 16px; border-radius: 16px;">
                        <h3 style="color: #388E3C;">完成率</h3>
                        <p style="font-size: 24px; font-weight: bold; color: #388E3C;">85%</p>
                    </div>
                </div>
                <div class="chart-placeholder">
                    月度趋势图表
                </div>
                <div class="chart-placeholder">
                    习惯分类占比
                </div>
            </div>
            <div class="tab-bar">
                <div class="tab-item">
                    <i class="fas fa-home"></i>
                    <span>主页</span>
                </div>
                <div class="tab-item">
                    <i class="fas fa-list"></i>
                    <span>习惯</span>
                </div>
                <div class="tab-item active">
                    <i class="fas fa-chart-bar"></i>
                    <span>统计</span>
                </div>
                <div class="tab-item">
                    <i class="fas fa-user"></i>
                    <span>我的</span>
                </div>
            </div>
        </div>

        <!-- 个人中心 -->
        <div class="screen">
            <div class="screen-title">个人中心</div>
            <div class="status-bar">
                <span>9:41</span>
                <div>
                    <i class="fas fa-signal"></i>
                    <i class="fas fa-wifi" style="margin-left: 8px;"></i>
                    <i class="fas fa-battery-full" style="margin-left: 8px;"></i>
                </div>
            </div>
            <div class="content">
                <div style="display: flex; align-items: center; margin-bottom: 32px;">
                    <div style="width: 80px; height: 80px; background: #ddd; border-radius: 40px; margin-right: 16px;"></div>
                    <div>
                        <h2>用户名</h2>
                        <p style="color: #666;">已加入 30 天</p>
                    </div>
                </div>
                <h3 style="margin-bottom: 16px;">我的成就</h3>
                <div class="badge-grid">
                    <div class="badge">
                        <i class="fas fa-star"></i>
                    </div>
                    <div class="badge">
                        <i class="fas fa-medal"></i>
                    </div>
                    <div class="badge">
                        <i class="fas fa-trophy"></i>
                    </div>
                </div>
                <div style="margin-top: 32px;">
                    <div style="padding: 16px 0; border-bottom: 1px solid #eee;">
                        <i class="fas fa-cog" style="margin-right: 12px;"></i>
                        设置
                    </div>
                    <div style="padding: 16px 0; border-bottom: 1px solid #eee;">
                        <i class="fas fa-question-circle" style="margin-right: 12px;"></i>
                        帮助中心
                    </div>
                    <div style="padding: 16px 0;">
                        <i class="fas fa-info-circle" style="margin-right: 12px;"></i>
                        关于我们
                    </div>
                </div>
            </div>
            <div class="tab-bar">
                <div class="tab-item">
                    <i class="fas fa-home"></i>
                    <span>主页</span>
                </div>
                <div class="tab-item">
                    <i class="fas fa-list"></i>
                    <span>习惯</span>
                </div>
                <div class="tab-item">
                    <i class="fas fa-chart-bar"></i>
                    <span>统计</span>
                </div>
                <div class="tab-item active">
                    <i class="fas fa-user"></i>
                    <span>我的</span>
                </div>
            </div>
        </div>

        <!-- 设置页面 -->
        <div class="screen">
            <div class="screen-title">设置</div>
            <div class="status-bar">
                <span>9:41</span>
                <div>
                    <i class="fas fa-signal"></i>
                    <i class="fas fa-wifi" style="margin-left: 8px;"></i>
                    <i class="fas fa-battery-full" style="margin-left: 8px;"></i>
                </div>
            </div>
            <div class="content">
                <div style="display: flex; align-items: center; margin-bottom: 24px;">
                    <i class="fas fa-arrow-left" style="margin-right: 16px;"></i>
                    <h2>设置</h2>
                </div>
                <div style="background: white; border-radius: 16px; overflow: hidden;">
                    <div style="padding: 16px; border-bottom: 1px solid #eee; display: flex; justify-content: space-between; align-items: center;">
                        <span>通知提醒</span>
                        <i class="fas fa-chevron-right"></i>
                    </div>
                    <div style="padding: 16px; border-bottom: 1px solid #eee; display: flex; justify-content: space-between; align-items: center;">
                        <span>隐私设置</span>
                        <i class="fas fa-chevron-right"></i>
                    </div>
                    <div style="padding: 16px; display: flex; justify-content: space-between; align-items: center;">
                        <span>清除缓存</span>
                        <i class="fas fa-chevron-right"></i>
                    </div>
                </div>
                <button class="btn" style="margin-top: 32px; background: #ff3b30;">退出登录</button>
            </div>
        </div>
    </div>
</body>
</html>
